<template>
  <px-form-item label="创建人" prop="peopleList" :rules="{ required: props.isRequired, message: '请选择状态', trigger: 'change' }">
    <px-select-v2
      v-model="peopleListVal"
      style="width: 100%"
      filterable
      clearable
      :options="peopleListList"
      placeholder="请选择创建人"
      @change="changePeopleList"
    />
  </px-form-item>
</template>

<script setup lang="ts">
import { getEmployeeIdAndName } from "@/utils/pengxi";
import { onMounted, ref, watch } from "vue";

// 父级方法和值
const emits = defineEmits(["changePeopleList"]);
const props = defineProps(["peopleList", "isRequired"]);

const peopleListVal = ref();
const peopleListList = ref([]);

watch(
  () => props.peopleList,
  val => {
    peopleListVal.value = props.peopleList;
  },
  { immediate: true }
);
onMounted(() => {
  queryPeopleListSelect();
});
// 获取状态下拉列表
const queryPeopleListSelect = async () => {
  const tempPeopleListList = await getEmployeeIdAndName(["HSE", "ISEP", "ERC&FP"]);
  peopleListList.value = tempPeopleListList || [];
};
// 改变状态值，传值给父级并做改变
const changePeopleList = () => {
  emits("changePeopleList", peopleListVal.value);
};
</script>
